<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="UTF-8">
		<title>红酒会 - 智能红酒管家</title>
		<link rel="shortcut icon" type="image/x-icon" href="${ctx}/favicon.ico" />
		<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/2.3.2/css/bootstrap.min.css" />
		<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/2.3.2/css/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="${ctx}/static/styles/style.css" />
	</head>
<body>
	
	<c:import url="/header"></c:import>
	
	<div class="container" id="container">
		<div class="row">
			
			<!-- 菜单栏 -->
			<div class="span2">
				<c:import url="menu.jsp">
					<c:param name="menu">favorite</c:param>
					<c:param name="userId">${id}</c:param>
				</c:import>
			</div>	
			
			<!-- 内容 -->
			<div class="span6">
				<div>
					<ul class="breadcrumb">
						<li><a href="${ctx}/user/${id}">用户中心</a> <span class="divider">/</span></li>
	  					<li class="active">收藏夹</li>
					</ul>
				</div>
				<div>
					<c:forEach var="list" items="${list}">
						<div style="padding-top:10px;">
							<a href="${ctx}/user/${id}/favorite/${list.id}">${list.name}</a>
							<span style="color:gray; padding-left:10px;">${list.topicCount} 个收藏</span>
							<c:if test="${sessionScope.user.id == id}">
								<span class="pull-right">
									<a href="javascript:;" style="color:gray;" onclick="showConfirm(${list.id});">删除</a>
								</span>
							</c:if>
						</div>
					</c:forEach>
				</div>
			</div>
			
			<!-- 侧栏 -->
			<div class="span4">
				<c:import url="/talk/right" />
			</div>
		</div>
	</div>
	
	<div id="confirmModal" class="modal hide fade" tabindex="-1">
  		<div class="favorite-header">
    		<button type="button" class="close" data-dismiss="modal">×</button>
    		<h4>删除收藏夹</h4>
  		</div>
  		<div class="modal-body">
    		<div class="alert alert-error">
    			<p><strong>是否确认删除该收藏夹？</strong></p>
    			<p>删除后该收藏夹下收藏的所有文章也将同时删除！</p>
    		</div>
  		</div>
  		<div class="modal-footer">
  			<form id="favForm" method="post">
  				<input type="hidden" id="id" name="id"/>
  				<button type="button" class="btn" data-dismiss="modal">取消</button>
  				<button type="submit" class="btn btn-danger">删除</button>
  			</form>
		</div>
	</div>
	
	<script type="text/javascript">
		function showConfirm(id) {
			var action = '${ctx}/user/favorite/' + id + '/delete'; 
			alert(action);
			$('#favForm').attr('action', action);
			$('#confirmModal').modal();
		}
	</script>
</body>
</html>